<template>
  <div class="first-banner">
    <!-- 头部 -->
    <div class="header">
      <a-select style="width: 25%;margin-right: 5%" v-model="advertising_type" @change="currentChange(1)">
        <a-select-option value="">
          页面类型
        </a-select-option>
        <a-select-option value="1">
          弹窗广告
        </a-select-option>
        <a-select-option value="2">
          全屏广告
        </a-select-option>
      </a-select>
      <a-input v-model.trim="page_name" class="search-input" placeholder="输入页面名称进行搜索">
        <a-icon slot="prefix" type="search"/>
      </a-input>
      <a-button class="search-btn" type="primary" @click="currentChange(1)">搜索</a-button>
    </div>
    <div class="content-head">
      <div class="left">
        广告总数:{{ main_page_pagination.total }}
      </div>
      <div content="right">
        <a-button icon="plus" @click="toPage('1')">添加弹窗广告</a-button>
        <a-button icon="plus" @click="toPage('2')">添加全屏广告</a-button>
      </div>
    </div>
    <!-- 数据表 -->
    <div class="content">
      <a-spin :spinning="loading">
        <a-table
            class="table-box"
            :pagination="{
                pageSize: main_page_pagination.pageSize,
                current: main_page_pagination.current,
                total: main_page_pagination.total,
                showQuickJumper: true,
                onChange: currentChange
            }"
            :columns="columns"
            :data-source="main_page_list"
            :rowKey="record => record.id">
          <span slot="show_rule" slot-scope="text, record" class="operation-box">
						<span>{{record.show_rule == 1 ?'每次进入页面':'每日首次登录小程序'}}</span>
					</span>
          <span slot="type" slot-scope="text, record" class="operation-box">
						<span>{{record.type == 1 ?'弹窗广告':'全屏广告'}}</span>
					</span>
          <!--<span slot="is_default" class="type-box" slot-scope="tags, record">-->
            <!--<a-switch :checked="record.is_default == 1 ? true : false" @change="switchIt(record)"/>-->
          <!--</span>-->
					<span slot="operation" slot-scope="text, record" class="operation-box">
						<a-tooltip>
						  <template slot="title">
							编辑
						  </template>
						  <i class="iconfont icon-ht_operation_edit" @click="toPage(record.type, record.id)"></i>
						</a-tooltip>
						<a-tooltip @click>
						  <template slot="title">
							删除
						  </template>
						  <i class="iconfont icon-ht_operation_delete" @click="deleteIt(record.id)"></i>
						</a-tooltip>
					</span>
        </a-table>
      </a-spin>
      <!-- 分页 -->
      <!--<a-pagination-->
          <!--class="page-pagination"-->
          <!--showQuickJumper-->
          <!--:pageSize="main_page_pagination.pageSize"-->
          <!--:current="main_page_pagination.current"-->
          <!--:total="main_page_pagination.total"-->
          <!--@change="currentChange"/>-->
    </div>
  </div>
</template>

<script>
	export default {
		data() {
			return {
				// 字段
				columns: [
					{
						title: 'ID',
						dataIndex: 'id',
						key: 'id'
					},
					{
						title: '创建时间',
						dataIndex: 'created_at',
						key: 'created_at'
					},
					{
						title: '页面名称',
						dataIndex: 'name',
						key: 'name'
					},
					{
						title: '类型',
						dataIndex: 'type',
						key: 'type',
						scopedSlots: {customRender: 'type'}
					},
					{
						title: '显示规则',
						dataIndex: 'show_rule',
						key: 'show_rule',
						scopedSlots: {customRender: 'show_rule'}
					},
					// {
					// 	title: "是否开启",
					// 	dataIndex: "is_default",
					// 	key: "is_default",
					// 	scopedSlots: { customRender: "is_default" }
					// },
					{
						title: '操作',
						key: 'operation',
						scopedSlots: {customRender: 'operation'}
					}
				],
				// 搜索值
				page_name: '',
				advertising_type: '',
				// 是否显示加载
				loading: false,
				// 主页列表
				main_page_list: [],
				// 主分页的页码
				main_page_pagination: {
					current: 1,
					pageSize: 10,
					total: 0
				},
			}
		},
		created() {
			this.currentChange(1)
		},
		methods: {
			// 添加全屏/弹窗路由跳转
			toPage(page_sort, id) {
				if(page_sort == 1) {
					if (id) {
						this.$router.push(this.fun.getUrl("/advertising", {}, {id: id}));
					} else {
						this.$router.push(this.fun.getUrl("/advertising"));
					}
        }

				if(page_sort == 2) {
					if (id) {
						this.$router.push(this.fun.getUrl("/full_screen", {}, {id: id}));
					} else {
						this.$router.push(this.fun.getUrl("/full_screen"));
					}
				}
			},
			/**
			 * 分页切换
			 */
			currentChange(page) {
				this.main_page_pagination.current = page;
				$http
						.post(
								"plugin.decorate.admin.decorate-advertising.get-list",
								{page: page, name: this.page_name, advertising_type: this.advertising_type},
								"loading"
						)
						.then(response => {
							if (response.result === 1) {
								this.main_page_pagination.total = response.data.total;
								this.main_page_pagination.pageSize = response.data.per_page;
								this.main_page_list = response.data.data;
							} else {
								this.main_page_list = [];
								if (response.data.status === -1) {
									this.currentChange(1);
								}
								// this.$message.error(response.msg);
							}
						})
						.catch(err => {
							console.error(err);
						});
			},
			/**
			 * 切换默认按钮
			 * @param {string} item 页面
			 */
			switchIt(item) {
				$http.post("plugin.decorate.admin.decorate-advertising.advertising-switch", { advertising_id: item.id, is_default: item.is_default == 1? 0:1 }, "loading").then(response => {
					if (response.result === 1) {
						this.currentChange(this.main_page_pagination.current);
						this.$message.success("设置成功");
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			/**
			 * 删除页面
			 * @param {string} id 页面ID
			 */
			deleteIt(id) {
				const that = this;
				// 弹层
				this.$confirm({
					title: '确认删除该广告？',
					onOk() {
						$http.post("plugin.decorate.admin.decorate-advertising.del", {id: id}, "loading").then(response => {
							if (response.result === 1) {
								that.currentChange(that.main_page_pagination.current);
								that.$message.success("删除成功");
							} else {
								if (response.msg) {
									that.$message.error(response.msg);
								}
							}
						}).catch(err => {
							console.log(err);
						});
					}
				});

			},
		}
	}
</script>

<style lang="less" scoped>
  .first-banner {
    padding: 30px 20px 20px 20px;
    .search-input {
      width: 40%;
    }
    .search-btn {
      width: 10%;
      margin-left: 5%;
    }
    .operation-box {
      display: flex;
      i {
        color: #999999;
        margin-left: 15px;
        cursor: pointer;
      }
      i:hover {
        color: #ffa800;
      }
    }
    .table-box {
      font-weight: bold;
    }
    .content-head {
      display: flex;
      margin: 15px 0;
      .left {
        position: relative;
        font-weight: bold;
        font-size: 16px;
        margin-left: 10px;
        display: flex;
        align-self: center;
        justify-self: center;
        flex: 1;
      }
      .left::before {
        content: "";
        width: 5px;
        height: 25px;
        position: absolute;
        top: 0;
        left: -10px;
        background: #29ba9c;
      }
      .right {
        display: flex;
        align-self: center;
        justify-self: center;
        flex: 0 0 100px;
      }
    }
    .page-pagination {
      text-align: center;
      margin-top: 24px;
    }
  }
</style>
